<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import yspglService from '@/api/yspgl'
import plxgDialog from '@/views/gdgl/gdzl/ysp/dialogs/plxg-dialog.vue'
import { useMainStore } from '@/store/main'
import { getFldm } from '@/utils/get-fldm'
import { mlxxMainStore } from '@/store/mlxx'
import { useRoute } from 'vue-router'
const route = useRoute()
const store = useMainStore()
const mlxxStore = mlxxMainStore()

const emit = defineEmits(['refresh'])
// 获取ref
const departForm = ref()
const plxgDialogRef = ref()
const zpFormRef = ref()

// 生命周期
onMounted(() => {
  // 获取密级
  getMj()
  // 获取保管期限
  getBgqx()
  // 获取音视频类别
  getYxlx()
})

/*
 * 获取密级（分类代码）
 */
const mjList = ref<any>([])
const getMj = async () => {
  mjList.value = await getFldm('gd006')
}
// 获取保管期限分类代码
const bgqxList = ref<any>([])
const getBgqx = async () => {
  bgqxList.value = await getFldm('gd020')
}
// 获取音视频类别
const yxlxList = ref<any>([])
const getYxlx = async () => {
  yxlxList.value = await getFldm('gd021')
}
const form = ref({
  bgqxdm: '',
  bgqxmc: '',
  dabh: '',
  dzwjmc: '',
  hdms: '',
  hour: '',
  lzdwmc: '',
  lzr: '',
  lzrq: '',
  minute: '',
  mjdm: '',
  mjmc: '',
  mlbh: '',
  mllxdm: '',
  nd: '',
  sc: '',
  second: '',
  sxh: '',
  sxmlmc: '',
  tjr: '',
  wjdx: '',
  wjdw: '',
  wjgs: '',
  ysplbmc: '',
  ysplbdm: '',
  zrz: '',
  cbdw: '',
  cbbm: '',
  tm: '',
  gdrxm: '',
  dh: '',
  cjh: '',
})

const formRules = reactive<FormRules>({
  tm: [{ required: true, message: '', trigger: 'blur' }],
  nd: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  tjr: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  zrr: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  ysplbdm: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  wjgs: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  lzdw: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  lzz: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  lzrq: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  dzwjmc: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  wjdx: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  wjdw: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  hour: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  minute: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  second: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  sc: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  mjdm: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  bgqxdm: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
})

const zpForm = ref({
  cbdw: '',
  cbbm: '',
  tm: '',
  nd: '',
  tjr: '',
  paz: '',
  psdd: '',
  psrq: '',
  mjdm: '',
  mjmc: '',
  bgqxmc: '',
  bgqxdm: '',
  bz: '',
  gdrxm: '',
  dh: '',
  cjdh: '',
})

const zpFormRules = reactive<FormRules>({
  tm: [{ required: true, message: '', trigger: 'blur' }],
  nd: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  tjr: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  paz: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  psdd: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  psrq: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  mjdm: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
})

/*
 * 打开批量修改目录弹框
 */
const openUpdateMlDialog = () => {
  plxgDialogRef.value.openDialog()
}
// 自动补0方法
const formatWithLeadingZero = (num: any) => {
  return (num < 10 && num?.length < 2) || !num ? '0' + num : num.toString()
}

const scValue = computed(() => {
  const h = formatWithLeadingZero(form.value.hour || 0)
  const m = formatWithLeadingZero(form.value.minute || 0)
  const s = formatWithLeadingZero(form.value.second || 0)
  return h + ':' + m + ':' + s
})

const mjChange = (value: string, lx: string) => {
  const temp = mjList.value.find((mj: any) => mj.dm === value)
  if (lx === 'zp') zpForm.value.mjmc = temp?.mc
  else form.value.mjmc = temp?.mc
}

const bgqxChange = (value: string, lx: string) => {
  const temp = bgqxList.value.find((qx: any) => qx.dm === value)
  if (lx === 'zp') zpForm.value.bgqxmc = temp?.mc
  else form.value.bgqxmc = temp?.mc
}

const ysplbChange = (value: string) => {
  const temp = yxlxList.value.find((lx: any) => lx.dm === value)
  form.value.ysplbmc = temp?.mc
}
/*
 * 保存照片（成功抛出刷新）
 */
const saveZp = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      const params = {
        ...store.nodeTreeData,
        ...zpForm.value,
        sxh: store.nodeTreeData.mlsxh,
        sxmlmc: zpForm.value.tm,
        mllydm: 'gd0590002',
      }
      yspglService
        .saveZpml(params, route.query.ajbh as string)
        .then(() => {
          ElMessage({ type: 'success', message: '保存成功' })
          emit('refresh')
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
    } else {
      ElMessage({ type: 'warning', message: '请补全信息' })
    }
  })
}

/*
 * 保存（成功抛出刷新）
 */
const save = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid: any) => {
    if (valid) {
      const params = {
        ...store.nodeTreeData,
        ...form.value,
        sc: scValue.value,
        sxh: store.nodeTreeData.mlsxh,
        sxmlmc: form.value.tm,
      }
      yspglService
        .saveYspml(params, route.query.ajbh as string)
        .then(() => {
          ElMessage({ type: 'success', message: '保存成功' })
          emit('refresh')
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
    } else {
      ElMessage({ type: 'warning', message: '请补全信息' })
    }
  })
}
const yspxxData = ref<any>([])
const getWjxqxx = (data: any) => {
  yspxxData.value = data
  if (data.lzr) {
    form.value = data
    form.value.nd = data.nd?.trim()
  } else {
    zpForm.value = data
    zpForm.value.nd = data.nd?.trim()
  }
  zpFormRef.value?.clearValidate()
  departForm.value?.clearValidate()
}
const isEditShow = computed(() => {
  if (mlxxStore.gdztData?.tgztdm === 'gd0150009' && mlxxStore.gdztData?.gdjddm === 'gd0180009') {
    return true
  }

  if (
    !mlxxStore.gdztData?.gdjddm ||
    mlxxStore.gdztData?.gdjddm === 'gd0180001' ||
    mlxxStore.gdztData?.gdjddm === 'gd0180005'
  ) {
    return true
  }

  if (
    mlxxStore.gdztData?.tglxdm === 'gd0040002' &&
    mlxxStore.gdztData?.ajlxdm.includes('gd0100003') &&
    store.$state.nodeTreeData?.mllxdm === 'gd0020002'
  ) {
    return true
  }

  if (
    mlxxStore.gdztData?.tglxdm === 'gd0040002' &&
    mlxxStore.gdztData?.ajlxdm.includes('gd0100004') &&
    store.$state.nodeTreeData?.mllxdm === 'gd0020001'
  ) {
    return true
  }
  if (
    mlxxStore.gdztData?.tglxdm === 'gd0040002' &&
    mlxxStore.gdztData?.ajlxdm.includes('gd0100005') &&
    store.$state.nodeTreeData?.mllxdm === 'gd0020003'
  ) {
    return true
  }
  return false
})

// const disabledDate = (time: any) => {
//   return dayjs(time).valueOf() > dayjs().valueOf()
// }

const handleInput = () => {
  form.value.minute = form.value.minute.replace(/\D/g, '')
  form.value.second = form.value.second.replace(/\D/g, '')
  // 确保输入的数字不大于59
  if (parseInt(form.value.minute) > 59) {
    form.value.minute = '59'
  }

  if (parseInt(form.value.second) > 59) {
    form.value.second = '59'
  }
}

defineExpose({ getWjxqxx })
</script>
<template>
  <div class="container" v-show="store.$state.nodeTreeData?.cj === 2">
    <div class="top-button">
      <button
        class="btn_operation"
        @click="openUpdateMlDialog()"
        :disabled="!(store.$state.nodeTreeData?.cj && isEditShow) || !mlxxStore.isUnlockReadOnly"
      >
        <div class="btn-editxgaj"></div>
        批量修改
      </button>
      <button
        v-if="yspxxData.lzr"
        class="btn_operation"
        @click="save(departForm)"
        :disabled="!(store.$state.nodeTreeData?.cj && isEditShow) || !mlxxStore.isUnlockReadOnly"
      >
        <div class="btn-save"></div>
        保存
      </button>
      <button
        v-else
        class="btn_operation"
        @click="saveZp(zpFormRef)"
        :disabled="!(store.$state.nodeTreeData?.cj && isEditShow) || !mlxxStore.isUnlockReadOnly"
      >
        <div class="btn-save"></div>
        保存
      </button>
    </div>
    <div class="content-table">
      <template v-if="yspxxData.lzr">
        <el-form ref="departForm" :model="form" :rules="formRules" class="demo-ruleForm">
          <table class="form-table">
            <tbody>
              <tr>
                <td class="title">承办单位</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input v-model="form.cbdw" maxlength="50" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">承办部门</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input v-model="form.cbbm" maxlength="50" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  题名
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="tm">
                    <el-input v-model="form.tm" maxlength="30" show-word-limit></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  年度
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="nd">
                    <el-input
                      v-model="form.nd"
                      maxlength="4"
                      @input="form.nd = form.nd.replace(/[^\d.]/g, '').trim()"
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  提交人
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="tjr">
                    <el-input v-model="form.tjr" maxlength="50"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  责任者
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="zrz">
                    <el-input v-model="form.zrz" maxlength="50"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  音视频类别
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="ysplbdm">
                    <el-select
                      v-model="form.ysplbdm"
                      clearable
                      placeholder="请选择"
                      style="width: 100%"
                      @change="ysplbChange"
                    >
                      <el-option
                        v-for="zrritem in yxlxList"
                        :key="zrritem.dm"
                        :label="zrritem.mc"
                        :value="zrritem.dm"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">会议/活动描述</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input
                      type="textarea"
                      :row="3"
                      v-model="form.hdms"
                      maxlength="50"
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  文件格式
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="wjgs">
                    <!-- <el-input
                      v-model="form.wjgs"
                      clearable
                      placeholder="请输入"
                      style="width: 100%"
                    /> -->
                    <el-select
                      v-model="form.wjgs"
                      clearable
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option label=".mp4" value="mp4"> </el-option>
                      <el-option label=".mp3" value="mp3"> </el-option>
                      <el-option label=".amr" value="amr"> </el-option>
                      <el-option label=".m4a" value="m4a"> </el-option>
                      <el-option label=".mov" value="mov"> </el-option>
                      <el-option label=".mkv" value="mkv"> </el-option>
                      <el-option label=".avi" value="avi"> </el-option>
                      <el-option label=".wpl" value="wpl"> </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  录制单位
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="lzdwmc">
                    <el-input v-model="form.lzdwmc" maxlength="500"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  录制者
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="lzr">
                    <el-input v-model="form.lzr" maxlength="50"></el-input>
                    <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  录制日期
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="lzrq">
                    <el-date-picker
                      style="width: 100%"
                      v-model="form.lzrq"
                      type="date"
                      placeholder="请选择"
                      size="small"
                      value-format="YYYY-MM-DD"
                      format="YYYY-MM-DD"
                    />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  电子文件名称
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="dzwjmc">
                    <el-input maxlength="50" v-model="form.dzwjmc"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  文件大小
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="wjdx">
                    <el-input-number v-model="form.wjdx" :controls="false" style="width: 100%" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  文件单位
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="wjdw">
                    <el-select
                      v-model="form.wjdw"
                      clearable
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option label="B" value="B"></el-option>
                      <el-option label="KB" value="KB"></el-option>
                      <el-option label="MB" value="MB"></el-option>
                      <el-option label="GB" value="GB"></el-option>
                      <el-option label="TB" value="TB"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  时
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="hour">
                    <el-input v-model="form.hour" maxlength="2"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  分
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="minute">
                    <el-input v-model="form.minute" maxlength="2" @input="handleInput"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  秒
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="second">
                    <el-input v-model="form.second" maxlength="2" @input="handleInput"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  时长
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="sc">
                    <el-input maxlength="50" v-model="scValue" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  密级
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="mjdm">
                    <el-select
                      v-model="form.mjdm"
                      clearable
                      placeholder="请选择"
                      style="width: 100%"
                      @change="mjChange"
                    >
                      <el-option
                        v-for="zrritem in mjList"
                        :key="zrritem.dm"
                        :label="zrritem.mc"
                        :value="zrritem.dm"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  保管期限
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="bgqxdm">
                    <el-select
                      v-model="form.bgqxdm"
                      clearable
                      placeholder="请选择"
                      style="width: 100%"
                      @change="bgqxChange"
                    >
                      <el-option
                        v-for="zrritem in bgqxList"
                        :key="zrritem.dm"
                        :label="zrritem.mc"
                        :value="zrritem.dm"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">归档人</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input maxlength="50" v-model="form.gdrxm" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td class="title">档号</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input maxlength="50" v-model="form.dh" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">参见号</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input maxlength="50" v-model="form.cjh" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </template>
      <template v-else>
        <el-form ref="zpFormRef" :model="zpForm" :rules="zpFormRules" class="demo-ruleForm">
          <table class="form-table">
            <tbody>
              <tr>
                <td class="title">承办单位</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input v-model="zpForm.cbdw" maxlength="50" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">承办部门</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input v-model="zpForm.cbbm" maxlength="50" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  题名
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="tm">
                    <el-input v-model="zpForm.tm" maxlength="30" show-word-limit></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  年度
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="nd">
                    <el-input
                      v-model="zpForm.nd"
                      maxlength="4"
                      @input="zpForm.nd = zpForm.nd.replace(/[^\d.]/g, '').trim()"
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  提交人
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="tjr">
                    <el-input v-model="zpForm.tjr" maxlength="50"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  拍摄者
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="paz">
                    <el-input v-model="zpForm.paz" maxlength="50"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  拍摄地点
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="psdd">
                    <el-input v-model="zpForm.psdd" maxlength="50"></el-input>
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  拍摄时间
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="psrq">
                    <el-date-picker
                      style="width: 100%"
                      v-model="zpForm.psrq"
                      type="date"
                      placeholder="请选择"
                      size="small"
                      value-format="YYYY-MM-DD"
                      format="YYYY-MM-DD"
                    />
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  密级
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="mjdm">
                    <el-select
                      v-model="zpForm.mjdm"
                      clearable
                      placeholder="请选择"
                      style="width: 100%"
                      @change="(val:string)=>mjChange(val, 'zp')"
                    >
                      <el-option
                        v-for="zrritem in mjList"
                        :key="zrritem.dm"
                        :label="zrritem.mc"
                        :value="zrritem.dm"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td class="title">
                  <span style="color: red">*</span>
                  保管期限
                </td>
                <td class="text">
                  <el-form-item style="width: 100%" prop="bgqxdm">
                    <el-select
                      v-model="zpForm.bgqxdm"
                      clearable
                      placeholder="请选择"
                      style="width: 100%"
                      @change="(val:string)=>bgqxChange(val, 'zp')"
                    >
                      <el-option
                        v-for="zrritem in bgqxList"
                        :key="zrritem.dm"
                        :label="zrritem.mc"
                        :value="zrritem.dm"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>

              <tr>
                <td class="title">备注</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input
                      type="textarea"
                      :row="3"
                      v-model="zpForm.bz"
                      maxlength="50"
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">归档人</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input maxlength="50" v-model="zpForm.gdrxm" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">档号</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input maxlength="50" v-model="zpForm.dh" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="title">参见号</td>
                <td class="text">
                  <el-form-item style="width: 100%">
                    <el-input maxlength="50" v-model="zpForm.cjdh" disabled></el-input>
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </template>
    </div>
    <plxg-dialog ref="plxgDialogRef" @refresh="emit('refresh', true)"></plxg-dialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .top-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content-table {
    height: calc(100% - 40px);
    overflow-y: auto;
    margin-top: 10px;
  }
}

.form-table {
  width: 100%;
}

.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr td {
  border: 1px solid #dfe8f3;
}
.form-table tbody tr .title {
  padding-right: 10px;
  width: 17%;
  text-align: right;
}
.form-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
}

.show-table {
  width: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
}
.show-table thead tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
  font-weight: bold;
  text-align: center;
  width: 25%;
  font-size: 16px;
}
.show-table tbody tr .title {
  padding-right: 10px;
  text-align: right;
  width: 16%;
}
.show-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}
.btn-div {
  widows: 100%;
  height: 35px;
  padding: 10px 3px;
  text-align: right;
}

.ryList1 {
  margin-top: 10px;
  height: calc(100% - 208px);
}
.ryList2 {
  margin-top: 10px;
  height: calc(100% - 173px);
}

.btn_check {
  margin: 5px;
}
.btn_checked {
  margin: 5px;
}
.header_sq {
  border-bottom: 1px solid #dfe8f3;
  margin-bottom: 10px;
  > div {
    float: right;
    margin-top: 10px;
  }
  p {
    margin-left: 10px;
    line-height: 40px;
    display: inline-block;
    // font-size: $fontsize_default;
    &:before {
      content: '';
      margin-right: 10px;
      vertical-align: middle;
      display: inline-block;
      width: 5px;
      height: 16px;
      background: #4084f0;
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  box-shadow: none;
}
:deep(.el-select__wrapper:hover) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  box-shadow: none;
}
:deep(.el-input-number .el-input__inner) {
  text-align: left;
}

:deep(.el-input-number.is-without-controls .el-input__wrapper) {
  padding-left: 11px;
  padding-right: 11px;
}
</style>

<style lang="scss">
.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr .text {
  .el-form-item__error {
    position: relative;
  }
}
.form-table tbody tr .text {
  .el-input.is-disabled .el-input__inner[disabled='disabled'] {
    background: #ebeff3;
    color: #cad0d7;
    border: none;
  }
}
.form-table tbody tr .text {
  .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
.show-table tbody tr td {
  .el-input.el-input--suffix > .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
</style>
